<template>
	<view class="page-box pad-30">
		<up-navbar title="工人介绍" placeholder :autoBack="true"></up-navbar>
		<view class="bg-white pad-30 radius30">
			<view class="centerXY columnY color-text">
				<view class="avatar-box">
					<image class="avatar" :src="workerData.avatar" mode="aspectFill"></image>
					<view class="isCollect">
						<isCollect :workerId="workerData.id"></isCollect>
					</view>
				</view>
				<view class="mar-top-20">姓名：{{workerData.name}}</view>
				<view class="mar-top-20">性别：{{ workerData.gender ==1 ? "男" :"女"}}</view>
			</view>
			<view v-if="withWork == 1">
				<view class="mar-top-50 font-28">服务项目：</view>
				<view class="flex list-box mar-top-30">
					<view class="list pad-20 radius10" :class="onList.indexOf(item.work_id) == -1 ? '' : 'on'"
						v-for="item in  workerList" :key="item.work_id" @click="hanldeClick(item)">
						<view class="font-28">{{item.name}}</view>
						<view class="font-28 mar-top-10 text-right">
							<text class="color-error">{{item.order_price}}</text>
							<text>/{{item.unit}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="mar-top-50 font-28">工人介绍：</view>
			<view class="mar-top-30 font-26">{{workerData.desc}}</view>
		</view>

		<view v-if="workerData.find_job_status == 1" class="button-bottom centerXY">
			<view @click="hanldeSubmit" class="btn font-32 mar-left-20 button-style">确定</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, } from 'vue';
	import { workerInfo, workerMultiSkill } from '@/api/index.js'
	import { onShow, onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
	import { useStore } from '@/store/useCounterStore';
	import util from '@/util/share.js'
	import { dataReportFun } from '@/util/dataReport.js'

	const store = useStore();

	// 获取工人信息
	const workerData = ref({});
	const workerList = ref([]);
	const getWorkerInfo = () => {
		workerInfo({
			worker_id: props.value.worker_id,
			with_work: withWork.value,
		}).then(res => {
			workerData.value = res.data.info;
			workerList.value = res.data.worker_skills;
		})
	}

	// 选中取消
	const onData = ref([]);
	const hanldeClick = (item) => {
		if (onList.value.includes(item.work_id)) {
			onData.value = onData.value.filter(i => i.work_id !== item.work_id);
			onList.value = onList.value.filter(i => i !== item.work_id);
		} else {
			onData.value.push(item);
			onList.value.push(item.work_id);
		}
	}

	// 选择完毕跳转订单页面
	const hanldeSubmit = () => {
		if (onList.value.length > 0) {
			// 储存一份
			// 工人
			store.workerItme = [workerData.value];
			// 服务id
			store.workIds = onList.value;
			if (props.value.type == 'page') {
				uni.navigateBack();
			} else {
				uni.redirectTo({
					url: `/pages/order/confirmOrder/confirmOrder`
				})
			}
		} else {
			uni.$u.toast('请选择服务项目');
		}
	}

	const props = ref({});
	const onList = ref([]);
	const withWork = ref(1);
	onLoad((option) => {
		props.value = option;
		dataReportFun({
			event: "client.page_view",
			worker_id: props.value.worker_id
		})
		
		util.friends();


		// 工人id
		if (option.worker_id) {
			getWorkerInfo();
		}
	})

	// 分享
	onShareAppMessage(() => {
		return util.onShare({
			path: `/pages/worker/detail?worker_id=${props.value.worker_id}`
		})
	})

	onShareTimeline(() => {
		let uid = "";
		if (uni.getStorageSync('userId')) {
			uid = uni.getStorageSync('userId');
		}
		
		let imageUrl = uni.getStorageSync('shareCover');
		return {
			query: `uid=${uid}&ref=wxmini_user_share&worker_id=${props.value.worker_id}`,
			title: "心宇利家政",
			imageUrl: imageUrl
		}
	})
</script>

<style scoped>
	.page-box {
		padding-bottom: 180rpx;
	}

	.avatar-box {
		position: relative;
		width: 140rpx;
		height: 140rpx;
	}

	.isCollect {
		position: absolute;
		right: -10rpx;
		bottom: -10rpx;
	}

	.avatar {
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}

	.list-box {
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.list {
		width: calc(50% - 12rpx);
		background: rgba(0, 85, 254, .1);
		box-sizing: border-box;
	}

	.on {
		border: 1px solid #0055FE;
		box-sizing: border-box;
	}

	.button-bottom {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background: white;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		z-index: 2;
	}

	.btn {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}
</style>